<template>
  <el-dropdown
    @menu-item-click="handleClick($event, dataScope)"
    @visible-change="visibleChange"
    :size="size"
    :placement="placement">
    <el-button type="text" size="medium" class="ddb-dropdown-title"><div>{{title}}<i :class="visible ? 'dropDownIcon hover':'dropDownIcon'"></i></div></el-button>
    <el-dropdown-menu slot="dropdown" ref="dropdownMenu" :appendToBody="false" :popperOptions="popperOptions" v-if="actions.length>0">
      <el-dropdown-item
        v-for="(item, index) in actions"
        :command="item"
        :key="index">
        {{item.command}}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  name: 'ddb-dropdown',
  props: {
    title: {
      type: String,
      default: '操作'
    },
    size: {
      type: String,
      default: 'medium'
    },
    dataScope: {
      type: Object,
      default: () => {}
    },
    placement: {
      type: String,
      default: 'bottom-end'
    },
    actions: {
      type: Array,
      default: () => [
        { command: '编辑', method: (payload) => { console.log('编辑') } },
        { command: '删除', method: (payload) => { console.log('删除') } }
      ]
    }
  },
  data () {
    return {
      visible: false,
      popperOptions: {
        boundariesElement: 'viewportPopperFixed',
        removeOnDestroy: false,
        gpuAcceleration: true,
        referenceRelativeToDocument:true
        // modifiersIgnored: ['shift', 'offset', 'keepTogether', 'flip']
      }
    }
  },
  mounted () {
    // if (this.$parent.$el.tagName === 'TABLE') {
    //   this.$refs.dropdownMenu.popperOptions.boundariesElement = this.$parent.$el
    // }
  },
  methods: {
    handleClick (command, scope) {
      let method = command.method
      if (method && Object.prototype.toString.call(method) === '[object Function]') {
        method.call(this, scope)
      } else {
        console.error('数组项必须有method属性且method必须是方法类型')
      }
    },
    visibleChange (visible) {
      this.visible = visible
    }
  }
}
</script>
